<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情 · Top - 英皇乐理 在线模考平台</title>
    <link rel="shortcut icon" th:href="@{/images/logo.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/productInfo.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
    <script type="text/javascript" th:src="@{/js/api.js}"></script>
    <script type="text/javascript" th:src="@{/js/productInfo.js}"></script>
</head>
<body>

<div class="main-div">
    <div class="main-box">
        <div th:replace="~{commons::headerbar(active='productList')}"></div>
        <div class="content position" style="display: flex; justify-content: space-between">
            <div>
            </div>
        </div>
        <div class="product-line">
            <div class="line-box">
                <div class="left">
                    <span><a>首页</a> <span>/</span></span>
                    <span><a>书店</a> <span>/</span></span>
                </div>
                <div class="right">[[${productEntity.productName}]]</div>
            </div>
        </div>
        <div class="product-box">
            <div class="detail-left">
                <div class="imgs">
                    <img th:src="${productEntity.fileEntities[0].filePath}"/>
                </div>
                <div class="imgs-line">
                    <div class="imgs-boxs">
                        <img th:src="${productEntity.fileEntities[0].filePath}"/>
                    </div>
                </div>
            </div>
            <div class="detail-right">
                <div class="title">
                    <div class="div">[[${productEntity.productName}]]
                        <div class="tags" style="margin-top: 10px;">
                            <span class="ivu-tag-text"> 实物商品 </span>
                        </div>
                    </div>
                </div>
                <!--<div class="sell-point"> 牛的一笔</div>-->
                <div class="item-detail-price-row">
                    <div class="item-price-left">
                        <div class="item-price-row">
                            <div><span class="item-price-title">价 &nbsp;&nbsp;&nbsp;&nbsp;格</span><span
                                    class="item-price">￥[[${productEntity.actualPrice}]]</span><span style="text-decoration: line-through;color: red">（原价：￥[[${productEntity.originalPrice}]]）</span></div>
                        </div>
                    </div>
                    <div class="item-price-right">
                        <div class="item-remarks-sum"><p>累计评价</p>
                            <p><span class="item-remarks-num">[[${commentCount}]] 条</span></p></div>
                    </div>
                </div>
                <div class="add-buy-car-box">
                    <div class="item-select">
                        <div class="item-select-row">
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">数量</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="number" value="1" placeholder="请输入购买数量" autocomplete="off" readonly class="layui-input">
                                    </div>
                                    <!--<div class="layui-form-mid layui-word-aux">库存100</div>-->
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="add-buy-car">
                        <button type="button" class="layui-btn layui-btn-danger" th:data-id="${productEntity.id}" th:onclick="|addCar(this.getAttribute('data-id'))|"><span>加入购物车</span></button>
                        <button type="button" class="layui-btn layui-btn-warm" th:data-id="${productEntity.id}" th:onclick="|buy(this.getAttribute('data-id'))|"><span>立即购买</span></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">商品介绍</li>
                <li>商品评价</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <img th:src="${productEntity.detailsImgUrl}"/>
                </div>
                <div class="layui-tab-item">
                    <div class="remarks-bar">
                        <span class="selectedBar">全部([[${commentCount}]])</span>
                        <span class="">好评</span>
                        <span class="">中评</span>
                        <span class="">差评</span>
                    </div>
                    <div class="comment-list">
                        <div class="item" th:each="comm, item : ${commentEntities}">
                            <div class="icon"></div>
                            <div class="content">
                                <input type="hidden" th:id="'hidden_score' + ${item.index}"
                                       th:value="${comm.productScore}"/>
                                <div class="score" id="score"></div>
                                <div class="context">[[${comm.content}]]</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{commons::footerbar}"></div>
</div>
</body>
</html>